"use client";

import React, { useState } from 'react';
import { UserOutlined, LockOutlined, MailOutlined, LeftOutlined } from '@ant-design/icons';
import { Button, Form, Input, Checkbox, Modal } from 'antd';
import { useRouter } from 'next/navigation';
import api from '../utils/api'; // 导入 axios 实例

// 邮箱格式验证正则表达式
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

export default function RegisterPage() {
  const [loading, setLoading] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [errorModalVisible, setErrorModalVisible] = useState(false); // 错误提示 modal
  const [errorMessage, setErrorMessage] = useState(""); // 错误消息
  const [successModalVisible, setSuccessModalVisible] = useState(false); // 注册成功弹窗
  const router = useRouter();
  const [form] = Form.useForm();

  const onFinish = async (values) => {
    setLoading(true);
    try {
      const response = await api.post('/users/register', {
        username: values.username,
        email: values.email,
        password: values.password,
      });

      // 判断返回状态码是否为 201
      if (response.status === 201) {
        // 成功时打开注册成功弹窗
        setSuccessModalVisible(true);
      } else {
        // 失败时打开错误弹窗
        setErrorMessage('注册失败，请稍后再试。');
        setErrorModalVisible(true);
      }
    } catch (error) {
      console.log('Error Response:', error.response?.data);
      if (error.response) {
        if (error.response.status === 409) {
          if (error.response.data.message === "Username already exists") {
            setErrorMessage('用户名已存在，请更换用户名');
          } else if (error.response.data.message === "Email already exists") {
            setErrorMessage('邮箱已存在，请更换邮箱');
          } else {
            setErrorMessage('注册失败，请检查输入信息');
          }
        } else {
          setErrorMessage(error.response.data.message || '服务器错误，请稍后再试');
        }
      } else if (error.request) {
        setErrorMessage('网络错误，请检查网络连接');
      } else {
        setErrorMessage('请求设置错误，请稍后再试');
      }
      setErrorModalVisible(true); // 显示错误提示弹窗
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  const onFinishFailed = (errorInfo) => {
    setErrorMessage('验证失败，请检查输入内容');
    setErrorModalVisible(true);
  };

  const showLicenseModal = () => {
    setIsModalVisible(true);
  };

  const handleModalCancel = () => {
    setIsModalVisible(false);
  };

  const handleSuccessModalCancel = () => {
    setSuccessModalVisible(false); // 关闭注册成功弹窗
    router.push('/login');  // 跳转到登录页面
  };

  const buttonStyle = {
    backgroundColor: '#ffffff',
    color: '#000000',
    border: '1px solid #cccccc',
    height: 40,
    fontSize: 14,
    borderRadius: 4,
    width: '100%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    transition: 'all 0.3s ease',
  };

  const buttonHoverStyle = {
    backgroundColor: '#f5f5f5',
  };

  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
      <Form
        form={form}
        name="register-form"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        size="large"
        style={{ width: 400 }}
        labelAlign="left"
      >

        <div style={{ 
                    textAlign: 'center', 
                    marginBottom: 30, 
                    fontSize: 40, 
                    fontWeight: 'bold',
                    color: '#333'
                }}>
                    用户注册
                </div>
        <Button
          type="default"
          onClick={() => router.back()}
          style={{
            position: 'absolute',
            top: 20,
            left: 20,
            zIndex: 1,
          }}
        >
          <LeftOutlined /> 返回
        </Button>

        <Form.Item
          label="用户名"
          name="username"
          rules={[{ required: true, message: '请输入用户名！' }, { min: 3, message: '用户名长度不能少于 3 个字符' }, { max: 20, message: '用户名长度不能超过 20 个字符' }]}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          style={{ marginBottom: 20 }}
        >
          <Input prefix={<UserOutlined />} placeholder="请输入用户名" style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item
          label="邮箱"
          name="email"
          rules={[{ required: true, message: '请输入邮箱！' }, { pattern: emailRegex, message: '请输入有效的邮箱地址' }]}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          style={{ marginBottom: 20 }}
        >
          <Input prefix={<MailOutlined />} placeholder="请输入邮箱" style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: '请输入密码！' }, { min: 6, message: '密码长度不能少于 6 个字符' }]}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          style={{ marginBottom: 20 }}
        >
          <Input.Password prefix={<LockOutlined />} placeholder="请输入密码" style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item
          label="确认密码"
          name="confirm"
          dependencies={['password']}
          hasFeedback
          rules={[{ required: true, message: '请再次输入密码！' }, ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue('password') === value) {
                return Promise.resolve();
              }
              return Promise.reject(new Error('两次输入的密码不一致！'));
            },
          })]}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          style={{ marginBottom: 20 }}
        >
          <Input.Password prefix={<LockOutlined />} placeholder="请再次输入密码" style={{ width: '100%' }} />
        </Form.Item>

        {/* 许可证同意按钮 */}
        <Form.Item
          name="agreement"
          valuePropName="checked"
          rules={[{ required: true, message: '请先阅读并同意服务许可' }]}
          wrapperCol={{ offset: 6, span: 18 }}
          style={{ marginBottom: 20 }}
        >
          <Checkbox>
            已阅读并同意{' '}
            <span style={{ fontWeight: 'bold', cursor: 'pointer' }} onClick={showLicenseModal}>
              服务许可
            </span>
          </Checkbox>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
          <Button
            type="default"
            htmlType="submit"
            block
            loading={loading}
            style={buttonStyle}
            onMouseEnter={(e) => e.target.style.backgroundColor = buttonHoverStyle.backgroundColor}
            onMouseLeave={(e) => e.target.style.backgroundColor = buttonStyle.backgroundColor}
          >
            注册
          </Button>
        </Form.Item>
      </Form>

      {/* 服务许可弹窗 */}
      <Modal
        title="服务许可协议"
        visible={isModalVisible}
        onCancel={handleModalCancel}
        footer={[<Button key="close" onClick={handleModalCancel}>关闭</Button>]}
      >
        <div style={{ whiteSpace: 'pre-wrap' }}>
        {`
欢迎使用 微百合论坛 服务！
本协议是您（以下简称 “用户”）与小蓝鲸（以下简称 “我们”）之间关于使用本论坛服务的法律协议。请仔细阅读本协议条款，您使用本服务即表示同意接受全部条款约束。

第一条 定义
论坛服务：指我们通过 微百合论坛平台提供的信息发布、交流、互动等网络服务。
用户内容：指用户在论坛内发布的文字、图片、视频、链接等任何形式的内容。

第二条 服务内容
我们提供论坛注册、发帖、回帖、私信、社区管理等基础功能。
我们有权根据运营需要调整或终止部分服务（将提前通知用户）。

第三条 用户义务
合法性承诺：用户不得发布或传播以下内容：
违反法律法规、公序良俗的信息；
虚假、欺诈、色情、暴力、恐怖主义内容；
侵犯他人知识产权、隐私或名誉的内容；
广告、垃圾信息或其他未经允许的商业推广。
账号安全：用户需妥善保管账号密码，因账号泄露导致的损失由用户自行承担。

第四条 知识产权
用户保留其发布内容的所有权，但授予我们免费、永久、非独家的使用权（包括复制、修改、展示、分发等）。
论坛标志、界面设计、软件代码等知识产权归我们所有，未经授权不得使用。

第五条 免责声明
我们不保证服务的持续性、安全性或无缺陷，不承担因网络故障、第三方行为等导致的损失。
用户因使用论坛内容而产生的风险由用户自行承担。

第六条 隐私政策
我们将按照《隐私政策》处理用户个人信息，详情请查阅 [链接]。

第七条 协议修改
我们有权单方面修改本协议，修改后的条款将在论坛公告后生效。用户继续使用服务即视为接受修改后的协议。

第八条 服务终止
若用户违反本协议，我们有权暂停或永久封禁账号，且不退还已产生费用。
我们可因不可抗力、政府要求等原因终止服务。

第九条 争议解决
因本协议产生的争议，双方应友好协商；协商不成的，提交 [XX 市] 人民法院诉讼解决。

第十条 其他条款
本协议未提及事宜，以法律法规为准。
条款部分无效不影响其他条款效力。
`}

        </div>
      </Modal>

      {/* 错误提示 Modal */}
      <Modal
        title="错误"
        visible={errorModalVisible}
        onCancel={() => setErrorModalVisible(false)}
        footer={[<Button key="close" onClick={() => setErrorModalVisible(false)}>关闭</Button>]}
      >
        <div>{errorMessage}</div>
      </Modal>

      {/* 注册成功 Modal */}
      <Modal
        title="注册成功"
        visible={successModalVisible}
        onCancel={handleSuccessModalCancel}
        footer={[<Button key="close" onClick={handleSuccessModalCancel}>OK</Button>]}
      >
        <div>您已成功注册，即将前往登录界面。</div>
      </Modal>
    </div>
  );
}
